<script setup lang="ts">
import dayjs from 'dayjs'
import { useRequest } from 'vue-request'
import { fetchClaimCouponListAPI } from '@/apis/fetchClaimCouponList'
import { useUserInfoStore } from '@/store/userInfo'
import { ClaimCouponAPI } from '@/apis/claimCoupon'

defineEmits(['close'])

const router = useRouter()
const userInfoStore = useUserInfoStore()

const { data } = useRequest(() => fetchClaimCouponListAPI(userInfoStore.userInfo!.token!).then(res => res.data?.data))

/**
 *
 * @param couponIds - 要领取的优惠券列表，以','分割的字符串
 */
async function claimCoupon(couponIds: string) {
  const res = await ClaimCouponAPI({
    id: couponIds,
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1)
    return
  uni.showModal({
    title: '领取成功',
    showCancel: false,
    success: () => router.push('couponList'),
    confirmText: '查看',
  })
}
</script>

<template>
  <view class="absolute left-1/2 top-1/2 flex flex-col items-center -translate-1/2">
    <view class="relative h-954rpx w-702rpx">
      <image
        class="h-954rpx w-702rpx"
        src="@/static/images/coupon_modal_bg.jpg"
      />
      <view class="absolute top-24rpx text-50rpx text-white font-bold leading-50rpx x-center">
        新人大礼包
      </view>
      <view class="absolute top-133rpx x-center">
        <CouponAlt
          v-for="coupon in data?.new_coupon"
          :key="coupon.id"
          :type="coupon.name"
          :price="coupon.complete_money"
          :minisum="coupon.money"
          :expire-time="dayjs.unix(coupon.use_end_time).format('YYYY.MM.DD')"
        />
      </view>
      <view class="absolute bottom-62rpx w-full flex flex-col items-center x-center">
        <button
          class="w-429rpx rounded-full from-#FFE59E to-#FFD284 bg-gradient-to-r px-114rpx py-27rpx text-50rpx text-#8E2C00 font-black leading-50rpx"
          @tap="data ? claimCoupon(data.new_coupon.map(el => el.id).join(',')) : undefined"
        >
          立即收下
        </button>
        <Spacer height="25" />
        <view class="text-28rpx text-white font-medium leading-28rpx">
          优惠券详情可在【我的-优惠券】中查看
        </view>
      </view>
    </view>
    <Spacer height="60" />
    <image
      class="h-76rpx w-76rpx"
      src="@/static/images/xmark_white_circle.png"
      @tap="$emit('close')"
    />
  </view>
</template>
